<template>
  <div class="home">
    <div class="navigator">
      <ul class="nav-items">
        <li v-for="item in navs" :key="item.path">
            <a @click="changeNav(item)" :class="item.path === curPath?'active':''">
              <el-icon :size='30'><component :is="item.icon" /></el-icon>
            </a>
        </li>
      </ul>
    </div>
    <div class="content">
      <router-view v-slot="{ Component }">
        <transition name="move" mode="out-in">
          <component ref="page" :is="Component"></component>
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script setup>

import {useRouter} from "vue-router";
import {ref,getCurrentInstance} from "vue";

const router = useRouter();
const page = ref()
const navs = ref([
  {path: "/chat", icon: "ChatDotRound"},
  {path: "/mj", icon: "Picture"},
  {path: "/sd", icon: "Monitor"},
  {path: "/apps", icon: "Menu"}
])
const curPath = ref(router.currentRoute.value.path)

const changeNav = (item) => {
  curPath.value = item.path
  router.push(item.path)
}
const socket = getCurrentInstance()?.appContext.config.globalProperties.$socket
socket.addEventListener('open',()=>{
  console.log("ws open")
})
socket.addEventListener('message',msg=>{
  console.log("ws message")
  parseData(new Uint8Array(msg.data))
})
socket.addEventListener('error',()=>{
  console.log("ws error")
})
socket.addEventListener('close',()=>{
  console.log("ws close")
})
const parseData = function(data){
  if(data.slice(80,1)[0]===1){
    te = new TextEncoder()
    target = te.endcode(data.slice(0,16))
    content = te.endcode(data.slice(16*5+1+ Uint32Array(data.slice(48,32))[0]))
    this.page.chatList.value.find(o=>o.address === target).msg.append(content)
  }else if(data.slice(80,1)[0]===2){

  }
}
</script>

<style lang="stylus" scoped>
.home {
  display: flex;
  background-color: #25272D;
  height 100vh
  width 100%

  .navigator {
    display flex
    flex-flow column
    width 48px
    padding 10px 6px
    border-right: 1px solid #3c3c3c

    .logo {
      display flex
      flex-flow column
      align-items center
      height 60px

      .divider {
        border-bottom 1px solid #4A4A4A
        width 80%
        height 10px
      }
    }

    .nav-items {
      margin-top 20px

      li {
        margin-bottom 15px

        a {
          color #DADBDC
          border-radius 10px
          width 44px
          height 44px
          display flex
          justify-content center
          align-items center
          cursor pointer

          .iconfont {
            font-size 20px
          }
        }

        a:hover, a.active {
          color #47fff1
        }
      }
    }
  }
  .content {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
  }

}
</style>
